// 引入 createApp
import { createApp } from "vue";

// 引入路由
import router from "@/router";

// 引入Store
import store from "@/store";

// 引入 createDiscreteApi
import { createDiscreteApi } from "naive-ui";

// 引入 BasicTableNew 组件
import BasicTableNew from "@/components/basic-table-new/index.vue";

// 引入 App.vue
import App from "./App.vue";

// 引入 Normalize.css
import "normalize.css";
// 引入 全局样式
import "./assets/global.scss";

// 调用 createDiscreteApi 得到 message 方法
const { message } = createDiscreteApi(["message"]);

// 创建应用
const app = createApp(App);

// 全局注册 BasicTableNew
app.component('BasicTableNew', BasicTableNew)

// 注册路由
app.use(router);

// 注册Store
app.use(store);

// 为了避免在组件中，频繁的调用 createDiscreteApi ，将这边调用之后的 message 直接挂载到全局上
// 后续组件上，就可以直接通过 this.$message 来使用了
app.config.globalProperties.$message = message;

// 挂载应用
app.mount("#app");

// setTimeout(() => {
//   message.info("hello");
// }, 1000);


/**
 * 环境变量
 *    
 *    是什么？
 *        key-value 的映射表，key 对应的 value 值，可以通过配置在不同的运行环境下得到不同的值
 * 
 *    Vite 提供了一个 import.meta.env 这个变量，值是一个对象，里面就是一些内置的环境变量
 * 
 * 
 * 环境变量文件
 *    是什么？
 *        项目根目录下，创建一个 .env.development .env.production 等这个文件就是环境变量文件
 * 
 *    里面写什么？
 *        key1=value1
 *        key2=value2
 * 
 *    作用是什么？
 *        项目运行时，会加载对应运行模式的环境变量文件中配置的变量,写入到 import.meta.env 中
 *        npm run dev     .env.development
 *        npm run build   .env.production
 *      
 * 运行模式
 *    是什么？
 *        import.meta.env.MODE 的值就叫做运行模式
 *    
 *    npm run build     =>   vite build      => vite build --mode production
 *    npm run dev       =>   vite            => vite --mode development
 *    npm run build:test    =>  vite build --mode test
 * 
 * 
 * VueCLI 这款脚手架工具，获取环境变量的语法是：
 *    将 import.meta.env 修改为 process.env
 */

console.log(import.meta.env)